@use "@/common/styles/colors"

.ssh-config-import-dialog
  width: 600px
  max-width: 90vw
  box-sizing: border-box

  h2
    margin: 0 0 1.5rem 0
    color: colors.$white
    font-size: 1.5rem
    font-weight: 600

  .form-group
    margin-bottom: 1.5rem

    label
      display: block
      margin-bottom: 0.5rem
      color: colors.$white
      font-weight: 500

    textarea
      width: 100%
      min-height: 200px
      padding: 0.75rem
      border: 2px solid colors.$dark-gray
      border-radius: 0.5rem
      background-color: colors.$darker-gray
      color: colors.$white
      font-size: 0.875rem
      resize: vertical
      box-sizing: border-box
      
      &:focus
        outline: none
        border-color: colors.$primary

      &::placeholder
        color: colors.$light-gray

  .key-files-section
    max-height: 300px
    overflow-y: auto
    border: 2px solid colors.$dark-gray
    border-radius: 0.5rem
    padding: 0.5rem
    box-sizing: border-box

    .key-file-item
      display: flex
      align-items: center
      justify-content: space-between
      gap: 1rem
      padding: 0.75rem
      border-radius: 0.375rem
      margin-bottom: 0.5rem
      background-color: colors.$dark-gray

      &:last-child
        margin-bottom: 0

      .key-info
        display: flex
        align-items: center
        gap: 0.75rem
        min-width: 0
        flex: 1

        .key-details
          display: flex
          flex-direction: column
          min-width: 0
          flex: 1

          .key-name
            color: colors.$white
            font-weight: 500
            word-break: break-word

          .key-path
            color: colors.$light-gray
            font-size: 0.875rem
            word-break: break-all

          .key-username
            color: colors.$primary
            font-size: 0.875rem
            font-weight: 500

      .key-actions
        flex-shrink: 0

        .uploaded-indicator
          color: colors.$success
          font-weight: 500
          font-size: 0.875rem

  .dialog-actions
    display: flex
    justify-content: flex-end
    gap: 1rem
    margin-top: 2rem
    padding-top: 1.5rem
    border-top: 1px solid colors.$dark-gray
    box-sizing: border-box
